<meta charset="utf-8">

<!-- <script>
    // 异步解决方案  如果优雅地解决异步问题
    //   前置内容：
    //       promise  迭代器  可迭代对象  生成器
    // 异步的解决方案
    //   1）回调函数  回调地狱


    // 需求: 
    //     1.发送一次网络请求, 等到这次网络请求的结果  传学生的编号  得到  学生的姓名
    //     2.发送第二次网络请求, 等待这次网络请求的结果  传学生的姓名  得到 学生的成绩
    //     3.发送第三次网络请求, 等待这次网络请求的结果  传学生的成绩  得到 成绩的等级

    function ajax(data) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(data)
            }, 2000)
        })
    }

    // 一层屋嵌套  不优雅
    function getData() {
        // 第一次发送ajax
        ajax("001").then(res1 => {
            console.log("res1是学生的姓名");
            // 第二次发送ajax
            ajax(res1).then(res2 => {
                console.log("res2是学生的成绩");
                // 第三次发送ajax
                ajax(res2).then(res3 => {
                    console.log("res3是学生的等级");
                })
            })
        })
    }

    getData()
</script> -->

<!-- <script>
    // 异步解决方案  如果优雅地解决异步问题
    //   前置内容：
    //       promise  迭代器  可迭代对象  生成器
    // 异步的解决方案
    //   1）回调函数  回调地狱
    //   2）then链


    // 需求: 
    //     1.发送一次网络请求, 等到这次网络请求的结果  传学生的编号  得到  学生的姓名
    //     2.发送第二次网络请求, 等待这次网络请求的结果  传学生的姓名  得到 学生的成绩
    //     3.发送第三次网络请求, 等待这次网络请求的结果  传学生的成绩  得到 成绩的等级

    function ajax(data) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(data)
            }, 2000)
        })
    }

    // 一层屋嵌套  不优雅
    function getData() {
        // 第一次发送ajax
        ajax("001").then(res1 => {
            console.log("res1是学生的姓名");
            return ajax(res1)
        }).then(res2 => {
            console.log("res2是学生的成绩");
            return ajax(res2)
        }).then(res3 => {
            console.log("res3是学生的等级");
        })
    }

    getData()
</script> -->

<!-- <script>
    // 异步解决方案  如果优雅地解决异步问题
    //   前置内容：
    //       promise  迭代器  可迭代对象  生成器
    // 异步的解决方案
    //   1）回调函数  回调地狱
    //   2）then链
    //   3）生成器函数（要学习生成器函数，必须学习迭代器）


    // 需求: 
    //     1.发送一次网络请求, 等到这次网络请求的结果  传学生的编号  得到  学生的姓名
    //     2.发送第二次网络请求, 等待这次网络请求的结果  传学生的姓名  得到 学生的成绩
    //     3.发送第三次网络请求, 等待这次网络请求的结果  传学生的成绩  得到 成绩的等级

    function ajax(data) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(data)
            }, 2000)
        })
    }

    // 生成器函数
    function* getData() {
        let res1 = yield ajax("001")
        let res2 = yield ajax(res1)
        let res3 = yield ajax(res2)
        console.log("res3:", "等级");
    }

    // 下面这一片代码能不能优化呢？
    //   TJ  co
    getData().next().value.then(res1 => {
        console.log("res1是学生的姓名");
        getData().next(res1).value.then(res2 => {
            console.log("res2是学生的成绩");
            getData().next(res2).value.then(res3 => {
                console.log("res3是学生的等级");
                // getData().next(res3)
            })
        })
    })
</script> -->

<script>
    // 异步解决方案  如果优雅地解决异步问题
    //   前置内容：
    //       promise  迭代器  可迭代对象  生成器
    // 异步的解决方案
    //   1）回调函数  回调地狱
    //   2）then链
    //   3）生成器函数（要学习生成器函数，必须学习迭代器）
    //   4）终级方案 async和await


    // 需求: 
    //     1.发送一次网络请求, 等到这次网络请求的结果  传学生的编号  得到  学生的姓名
    //     2.发送第二次网络请求, 等待这次网络请求的结果  传学生的姓名  得到 学生的成绩
    //     3.发送第三次网络请求, 等待这次网络请求的结果  传学生的成绩  得到 成绩的等级

    function ajax(data) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(data)
            }, 2000)
        })
    }

    // 生成器函数  
    // async和await并不能把同步代码变成异步代码
    // async和await 仅仅是生成器的语法糖
    // koa1.x中 生成函数有大量使用
    // react中 有一些中间件，也用到生成器
    // 生成器是必学  迭代器  可迭代对象都需要学
    async function getData() {
        let res1 = await ajax("001")
        console.log("res1是学生的姓名");
        let res2 = await ajax(res1)
        console.log("res2是学生的成绩");
        let res3 = await ajax(res2)
        console.log("res3是学生的等级");
    }

    getData()
</script>